<template>
  <div class="box">
    <!-- 候选知识点 -->
    <div class="left">
      <h3>候选知识点（26）</h3>
      <div class="ats"
        >展示方式：<el-button>全部</el-button><el-button type="info">按章节</el-button></div
      >
      <div>
        <el-input v-model="input" style="width: 240px" placeholder="Please input" /><el-button
          >搜索</el-button
        >
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="第一章" name="first">
            <div><el-button>批量添加</el-button><el-button>批量删除</el-button></div>
            <div class="bans">
              <el-table
                ref="multipleTableRef"
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column align="center" label="序号" width="120">
                  <template #default="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" property="address" label="名称" width="120" />
                <el-table-column align="center" fixed="right" label="操作">
                  <template #default>
                    <el-button link type="primary" size="small"> 添加 </el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="第二章" name="second">Config</el-tab-pane>
          <el-tab-pane label="第三章" name="third">Role</el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 已有知识点 -->
    <div class="right">
      <h3>已有知识点（26）</h3>
      <div class="ats"
        >展示方式：<el-button>全部</el-button><el-button type="info">按章节</el-button></div
      >
      <div>
        <el-input v-model="input" style="width: 240px" placeholder="Please input" /><el-button
          >搜索</el-button
        >
      </div>
      <div>
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="第一章" name="first">
            <div><el-button>批量添加</el-button><el-button>批量删除</el-button></div>
            <div class="bans">
              <el-table
                ref="multipleTableRef"
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column align="center" label="序号" width="120">
                  <template #default="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" property="address" label="名称" width="120" />
                <el-table-column align="center" fixed="right" label="操作">
                  <template #default>
                    <el-button link type="primary" size="small"> 添加 </el-button>
                    <el-button link type="primary" size="small">查看文中位置</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="第二章" name="second">Config</el-tab-pane>
          <el-tab-pane label="第三章" name="third">Role</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <!-- 上一步 下一步操作 -->
  <div class="flort"><el-button>上一步</el-button><el-button type="info">下一步</el-button></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
const activeName = 'first'
import { ElTable } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    flex: 1;
    .ats {
      height: 40px;
    }
    .bans {
      border: 1px solid black;
    }
  }
  .right {
    flex: 1;
    .ats {
      height: 40px;
    }
    .bans {
      border: 1px solid black;
    }
  }
}
.flort{
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}
</style>